<!-- 司机管理 -->
<template>
  <div class="dashboard-container driver customer-list-box">
    <div class="app-container">
      <!-- 搜索 -->
      <el-card
        shadow="never"
        class="search-card-box"
        style="margin-bottom: 20px;"
      >
        <el-form
          ref="driverSearchFormData"
          :model="driverSearchFormData"
          label-width="90px"
        >
          <el-row :gutter="60">
            <el-col :span="8">
              <el-form-item
                label="司机账号:"
                style="margin-bottom: 0px"
              >
                <el-input
                  v-model="driverSearchFormData.account"
                  placeholder="请输入司机账号"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="司机姓名:"
                style="margin-bottom: 0px"
              >
                <el-input
                  v-model="driverSearchFormData.name"
                  placeholder="请输入司机姓名"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="司机手机号:"
                style="margin-bottom: 20px"
              >
                <el-input
                  v-model="driverSearchFormData.phone"
                  placeholder="请输入司机手机号"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                prop="agentId"
                label="所属机构:"
                style="margin-bottom: 0px"
              >
                <treeselect
                  v-model="driverSearchFormData.agentId"
                  :options="agencyOptions"
                  :normalizer="normalizer"
                  :searchable="true"
                  style="width: 100%"
                  no-options-text="暂无数据"
                  no-results-text="暂无数据"
                  placeholder="请选择所属机构"
                  @select="selectEndAgency"
                  @open="opens"
                  @close="closes"
                />
                <img
                  ref="arrows"
                  src="../../assets/pullDown.png"
                  style="
                    position: absolute;
                    width: 18px;
                    height: 18px;
                    right: 9px;
                    top: 12px;
                    cursor: pointer;
                    pointer-events: none;
                    transition-duration: 0.3s;
                  "
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button
                type="warning"
                @click="handleFilter"
              >搜索</el-button>
              <el-button
                plain
                class="reset-btn"
                @click="resetForm('driverSearchFormData')"
              >重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <!-- 列表 -->
      <el-card
        v-loading="loading"
        class="box-card"
        shadow="never"
        element-loading-text="加载中"
        style="margin-top: 20px;"
      >
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <el-table-column
            type="index"
            width="119"
            label="序号"
          >
          </el-table-column>
          <el-table-column
            prop="account"
            label="司机账号"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="司机姓名"
          >
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="司机电话"
          >
          </el-table-column>
          <el-table-column
            prop="truck"
            label="关联车辆"
          >
            <template #default="scope">
              <span>{{ scope.row.truck.licensePlate }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="agency"
            label="所属机构"
          >
            <template #default="scope">
              <span>{{ scope.row.agency.name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="workStatus"
            label="工作状态"
          >
            <template #default="scope">
              <span
                v-show="scope.row.workStatus !== null"
                class="tableColumn-status"
                :class="{'stop-use': scope.row.workStatus === 0}"
              >
                {{ scope.row.workStatus === 0 ? '休息' : '上班' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
          >
            <template #default="scope">
              <el-link
                type="primary"
                :underline="false"
                @click="$router.push(`driver-detail?id=${scope.row.userId}`)"
              >查看</el-link>
              <el-divider direction="vertical"></el-divider>
              <!-- -->
              <el-link
                type="primary"
                :underline="false"
                @click="vehicleConfig(scope.row)"
              >配置车辆</el-link>
            </template>
          </el-table-column>
          <!-- 搜索不到内容时显示 -->
          <el-card
            v-show="
              (!tableData || tableData.length <= 0) && !loading && searchkey
            "
            slot="empty"
            shadow="never"
          >
            <empty style="text-align: center"></empty>
          </el-card>
        </el-table>
        <!-- 分页 -->
        <div
          v-show="tableData && tableData.length > 0"
          class="pagination"
        >
          <div class="pages">
            <el-pagination
              :current-page="Number(driverSearchFormData.page)"
              :total="Number(total)"
              :page-size="Number(driverSearchFormData.pageSize)"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-card>
      <!-- 配置车辆 -->
      <driverConfigure
        ref="driverConfigure"
        :select-base="configCarList"
        :form-base="configFormData"
        :truck-base="truckData"
      ></driverConfigure>
    </div>
  </div>
</template>
<script>
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Treeselect from '@riophae/vue-treeselect'
import { agencyList } from '@/api/institutions'
import {
  driverList,
  getTruckListInDriver
} from '@/api/transit'
import driverConfigure from './components/driver-configure.vue'
export default {
  name: 'Courses',
  components: {
    Treeselect,
    driverConfigure
  },
  data() {
    return {
      driverSearchFormData: {
        page: 1,
        pageSize: 10,
        account: '',
        name: '',
        phone: '',
        agentId: null
      },
      agencyOptions: [],
      // 对树状结构进行解析返回数据
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      loading: false,
      // 表格数据
      tableData: [
        {
          account: '',
          age: '',
          agency: {
            name: ''
          },
          id: '',
          mobile: '',
          name: '',
          picture: '',
          truck: '',
          userId: '',
          workDate: '',
          workStatus: ''
        }
      ],
      total: 0,
      searchkey: false,
      configFormData: {
        userId: '',
        name: '',
        mobile: '',
        agency: {
          name: ''
        },
        truck: {
          licensePlate: '',
          workStatus: ''
        }
      },
      configCarList: [],
      truckData: {}
    }
  },
  created() {
    this.getAgencyList()
    this.getList()
    this.getStopUseVehicle()
  },
  methods: {
    opens() {
      this.$refs.arrows.style.transform = 'rotate(-180deg)'
    },
    closes() {
      this.$refs.arrows.style.transform = 'rotate(0deg)'
    },
    selectEndAgency(val) {
      this.driverSearchFormData.agentId = val.id
      console.log(val)
    },
    // 获取所属机构列表数据
    async getAgencyList() {
      const { data: res } = await agencyList()
      // 获取数据给options
      this.agencyOptions = JSON.parse(res)
    },
    // 获取列表数据
    async getList() {
      this.loading = true
      const res = await driverList(this.driverSearchFormData)

      this.tableData = res.data.items
      this.total = res.data.counts
      this.loading = false
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.driverSearchFormData.pageSize = val
      if (this.driverSearchFormData.page === 1) {
        this.getList(this.driverSearchFormData)
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.driverSearchFormData.page = val
      this.getList()
    },
    clearField() {
      // 如果其他搜索项没有值则不传给后端
      if (this.driverSearchFormData.account === '') {
        this.$delete(this.driverSearchFormData, 'account')
      }
      if (this.driverSearchFormData.name === '') {
        this.$delete(this.driverSearchFormData, 'name')
      }
      if (this.driverSearchFormData.phone === '') {
        this.$delete(this.driverSearchFormData, 'phone')
      }
      if (this.driverSearchFormData.agentId === null) {
        this.$delete(this.driverSearchFormData, 'agentId')
      }
    },
    setField() {
      // 对搜索项属性设置响应式，便于重置方法生效
      this.$set(this.driverSearchFormData, 'account')
      this.$set(this.driverSearchFormData, 'name')
      this.$set(this.driverSearchFormData, 'phone')
      this.$set(this.driverSearchFormData, 'agentId')
    },
    // 搜索
    handleFilter() {
      this.clearField()
      // console.log(this.driverSearchFormData)
      this.driverSearchFormData.page = 1
      this.getList()
      this.searchkey = true
    },
    // 重置搜索项
    resetForm(driverSearchFormData) {
      this.setField()
      this.searchkey = false
      this.$refs[driverSearchFormData].resetFields()
      this.getList()
    },
    // 配置车辆
    vehicleConfig(row) {
      this.configFormData = row
      const h = this.$createElement
      this.$confirm('车辆配置', {
        title: '车辆配置',
        message: h('div', [
          h('p', { style: 'margin-bottom: 9px; color: rgb(51, 41, 41);' }, '配置车辆需满足以下条件：'),
          h('span', { style: 'width: 16px; height: 16px; background: rgb(250, 252, 255); border: 1px solid rgb(235, 238, 245); border-radius: 50%; display: inline-block; text-align: center; margin-right: 6px; line-height: 14px;' }, '1'),
          h('span', { style: 'color: rgb(51, 41, 41);' }, '司机信息已完善'),
          h('span', { style: 'width: 16px; height: 16px; background: rgb(250, 252, 255); border: 1px solid rgb(235, 238, 245); margin-left: 90px; border-radius: 50%; display: inline-block; text-align: center; line-height: 14px; margin-right: 6px;' }, '2'),
          h('span', { style: 'color: rgb(51, 41, 41); margin-right: 20px;' }, '司机已设置排班'),
          h('span', { style: 'width: 16px; height: 16px; background: rgb(250, 252, 255); border: 1px solid rgb(235, 238, 245); margin-top: 10px; border-radius: 50%; display: inline-block; text-align: center; line-height: 14px; margin-right: 6px;' }, '3'),
          h('span', { style: 'color: rgb(51, 41, 41);' }, '司机绑定车辆未在启用状态')
        ]),
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // console.log(row)
        this.$refs.driverConfigure.dialogFormV()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消车辆配置'
        })
      })
    },
    // 获取停用的车辆
    async getStopUseVehicle() {
      const res = await getTruckListInDriver()
      this.configCarList = res.data
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  text-align: center;
  margin-top: 40px;
}
// 下拉框
::v-deep .el-select {
  width: 100%;
}

::v-deep .el-card{
  overflow: initial;
}
.tableColumn-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #1dc779;
  border-radius: 50%;
  margin-right: 6px;
}
.stop-use::before {
  background-color: #e15536;
}
</style>

